<template>
	<view class="content" :style="{ paddingTop: topHeight }">
		<view class="dis-flex flex-x-between flex-y-center box">
			<view class="dis-flex flex-y-center">
				<image src="@/static/imgs/back.png" mode="widthFix" @click="back" color="#252525" style="width: 30rpx;">
				</image>
				<text>官宣书</text>
			</view>
			<image class="imgicon" src="/static/imgs/fx.png" mode="widthFix" @click="() => isShare = true" />
		</view>
		<view class="wrap">
			<view class="gz dis-flex flex-x-between flex-y-center">
				<image v-if="article.user.avatar" :src="IMG_URL + article.user.avatar" class="avatar"
					style="border-radius:50%;width: 30px;height: 30px;" mode="widthFix" />
				<image v-else src="/static/imgs/tou.png" style="width:68rpx;" mode="widthFix" />
				<view class="txts flex-box">{{ article.user.username }}</view>
				<view class="tags" v-if="article.is_interest == 1" @click="cancelInterestOne(article.user_id)">已关注
				</view>
				<view class="tags" v-else @click="interest(article.user_id)">关注</view>
			</view>

			<view class="gz">
				<view class="title" v-if="article.type !== 2">{{ article.introduce }}</view>
				<view class="dis-flex flex-y-center tagAll">
					<template v-if="article.type === 0">
						<view class="tag">分享</view>
					</template>
					<template v-else-if="article.type === 1">
						<view class="tag">永久</view>
					</template>
					<template v-else-if="article.type === 2">
						<view class="tag">誓言</view>
					</template>
				</view>
				<view class="swiper" v-if="article.type !== 2 && article.picture">
					<u-swiper :list="pictureArray(article.picture)" :autoplay="false" @change="e => current = e.current"
						height="500">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in pictureArray(article.picture)"
								:key="index" :class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<view class="swiper" v-else-if="article.type !== 2 && article.video">
					<video :src="IMG_URL + article.video" autoplay="true" style="width: 100%;height: 500px;"></video>
				</view>
				<view class="desc">
					{{ article.details }}
				</view>
				<view class="editime"><text>{{ formatTimestamp(article.createtime) }}</text><text
						v-if="article.is_ip == 0">{{
		article.ip }}</text></view>
				<HallComment :article_id="article.id" :key="commentKey"></HallComment>
			</view>
		</view>
		<view class="footer dis-flex flex-y-center">
			<view class="inputWrap">
				<image src="/static/imgs/pub.png" style="width:26rpx;" slot="prefix" mode="widthFix" />
				<input placeholder="说点什么..." shape="circle" v-model="content" />

				<!-- </u-input> -->
			</view>
			<view class="imgWrap flex-box" style="display: flex;
    align-items: center;
    justify-content: flex-start;">
				<image v-if="article.is_like == 1" src='/static/imgs/love_active.png' mode="widthFix"
					@click="cancelLikeOne(article.id)" />
				<image v-else src='/static/imgs/love.png' mode="widthFix" @click="likeOne(article.id)" />
				<image v-if="article.is_step == 1" src="/static/imgs/bad_active.png" mode="widthFix"
					@click="cancelStepArticleOne(article.id)" />
				<image v-else src="/static/imgs/bad.png" mode="widthFix" @click="stepArticleOne(article.id)" />
				<image v-if="article.is_collect == 1" src="/static/imgs/collect_active.png" mode="widthFix"
					@click="cancelCollectOne(article.id)" />
				<image v-else src="/static/imgs/collect.png" mode="widthFix" @click="collectOne(article.id)" />
				<!-- <image src="/static/imgs/comment.png" mode="widthFix" /> -->
				<u-button style="    width: 51px;
    border-radius: 5%;
    margin-left: 2px;
    background-color: rgb(253, 55, 72);
    color: rgb(255, 255, 255);
    height: 25px;
    font-size: 10px;" @click="send(article.id)">发送</u-button>
			</view>
		</view>

		<Share ref="addressWindow" :address='isShare' @changeClose="() => isShare = false" v-if="isShare"
			:article="article">
		</Share>
	</view>
</template>

<script>
import moment from 'moment';
import {
	IMG_URL,
} from "../../config/app.js";
import {
	detail,
	remarkList,
	interestOne,
	like,
	cancelLike,
	collect,
	cancelCollect,
	stepArticle,
	cancelStepArticle, cancelInterest, publish
} from '../../api/hall.js'
import env from '@/utlis/env.js';
import Share from '@/components/share'
import HallComment from '@/components/hall/comment'
export default {
	components: {
		Share,
		HallComment
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			loading: false,
			isShare: false,
			isLove: 1,
			current: 0,
			imgList: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			],
			article_id: '',
			article: {},
			content: '',
			commentKey: 1,
		}
	},
	onLoad(option) {
		this.getdetail(option.id);
		// console.log(option.id, '22222');
		this.article_id = option.id;

		// console.log(this.article_id, '9999999999999999');

	},
	mounted() {

	},
	methods: {

		async send(article_id, remark_id = 0) {
			// console.log(this.content, '发送评论');
			if (this.content.trim() !== '') {
				const res = await publish({
					'article_id': article_id,
					'remark_id': remark_id,
					'content': this.content
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '评论成功',
							icon: 'success',
							duration: 1500
						});
						this.content = ''
						this.commentKey += 1
					}

				});
			} else {
				uni.showToast({
					title: '评论不可能为空',
					icon: 'error',
					duration: 1500
				});
			}
		},
		formatTimestamp(timestamp) {
			const currentTime = moment();
			const articleTime = moment.unix(timestamp);

			const timeDifference = currentTime.diff(articleTime, 'seconds');
			const minutes = Math.floor(timeDifference / 60);
			const hours = Math.floor(timeDifference / 3600);
			const days = Math.floor(timeDifference / (3600 * 24));
			const weeks = Math.floor(timeDifference / (3600 * 24 * 7));

			if (weeks >= 1) {
				return articleTime.format('YYYY-MM-DD HH:mm');
			} else if (days >= 2) {
				return `${days}天前`;
			} else if (days === 1) {
				return '昨天';
			} else if (hours >= 1) {
				return `${hours}小时前`;
			} else if (minutes >= 1) {
				return `${minutes}分钟前`;
			} else {
				return '刚刚';
			}
		},
		pictureArray(list) {
			const array = list.split(",")
			const completeArray = array.map(path => IMG_URL + path)

			return completeArray;
		},
		back() {
			uni.navigateBack({
				delta: 1,
				fail(e) {
					// console.log(e, '------------');
				}
			})
		},
		// 获取详情数据
		async getdetail(article_id) {

			const res = await detail({
				'article_id': article_id
			}).then(res => {
				// console.log(res, '内容详情');
				this.article = res.data
			});
		},
		//关注某人
		async interest(user_id) {
			const res = await interestOne({
				'user_id': user_id
			}).then(res => {
				// console.log(res, '关注某人');
				this.article.is_interest = 1
			});
		},
		//取消关注某人
		async cancelInterestOne(user_id) {
			const res = await cancelInterest({
				'user_id': user_id
			}).then(res => {
				// console.log(res, '取消关注某人');
				this.article.is_interest = 0
			});
		},
		//点赞
		async likeOne(article_id) {
			const res = await like({
				'article_id': article_id
			}).then(res => {
				// console.log(res, '点赞');
				if (res.code == 1) {
					this.article.is_like = 1
				}

			});
		},
		//取消点赞
		async cancelLikeOne(article_id) {
			const res = await cancelLike({
				'article_id': article_id
			}).then(res => {
				// console.log(res, '取消点赞');
				if (res.code == 1) {
					this.article.is_like = 0
				}

			});
		},
		//收藏
		async collectOne(article_id) {
			const res = await collect({
				'article_id': article_id
			}).then(res => {
				// console.log(res, '收藏');
				if (res.code == 1) {
					this.article.is_collect = 1
				}

			});
		},
		//取消收藏
		async cancelCollectOne(article_id) {
			const res = await cancelCollect({
				'article_id': article_id
			}).then(res => {
				// console.log(res, '取消收藏');
				if (res.code == 1) {
					this.article.is_collect = 0
				}

			});
		},
		//踩
		async stepArticleOne(article_id) {
			const res = await stepArticle({
				'article_id': article_id
			}).then(res => {
				console.log(res, '踩');
				if (res.code == 1) {
					this.article.is_step = 1
				}

			});
		},
		//取消踩
		async cancelStepArticleOne(article_id) {
			const res = await cancelStepArticle({
				'article_id': article_id
			}).then(res => {
				console.log(res, '取消踩');
				if (res.code == 1) {
					this.article.is_step = 0
				}

			});
		},

	}
}
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.content {
	.box {
		padding: 32rpx 30rpx 12rpx 24rpx;
		padding-top: 88rpx;

		.imgicon {
			width: 40rpx;
		}

		text {
			font-weight: bold;
			font-size: 34rpx;
			color: #252525;
			display: inline-block;
			margin-left: 12rpx;
		}
	}

	.wrap {
		padding: 0 10rpx;

		.gz {
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid rgba(0, 0, 0, 0.13);
			padding: 23rpx 20rpx;
			margin-top: 20rpx;

			.txts {
				font-weight: bold;
				font-size: 30rpx;
				color: $uni-text-color;
				padding-left: 20rpx;
			}

			.tags {
				width: 125rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				background: #FFF;
				border-radius: 26rpx;
				border: 1px solid $uni-text-color-inverse;
				font-size: 24rpx;
				color: $uni-text-color-inverse;
			}

			.title {
				font-weight: bold;
				font-size: 36rpx;
				line-height: 48rpx;
				color: $uni-text-color;
			}

			.tag {
				font-size: 20rpx;
				color: $uni-text-color-placeholder;
				border-radius: 10rpx;
				border: 1px solid #DDDDDD;
				padding: 4rpx 8rpx;
				margin: 22rpx 12rpx 30rpx 0;
			}

			.desc {
				font-size: 30rpx;
				color: $uni-text-color;
				line-height: 50rpx;
				padding: 20rpx;
			}

			.editime {
				padding: 28rpx 0;
				border-bottom: 1px solid #EEE;
				font-size: 24rpx;
				color: $uni-text-color-placeholder;
				line-height: 50rpx;

				&>text {
					display: inline-block;
					margin-right: 18rpx;
				}
			}

			.swiper {
				z-index: 1;
			}
		}

		.indicator {
			display: flex;
			flex-direction: row;
			justify-content: center;

			&__dot {
				height: 12rpx;
				width: 12rpx;
				border-radius: 100rpx;
				background-color: #CBCBCC;
				margin: 0 10rpx;
				transition: background-color 0.3s;

				&--active {
					background-color: #f00;
				}
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		height: 120rpx;
		background: #fff;
		border-top: 1px solid #EEE;
		padding: 10rpx 30rpx;

		.inputWrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 400rpx;
			flex-shrink: 0;
		}

		.imgWrap {
			image {
				width: 48rpx;
				margin-left: 22rpx;
			}
		}
	}
}
</style>